<template>
  <div class="model-map">
    <div style="width: 100%;text-align: left;" v-if="value7.type == 'map' && !operateShow">{{ value7.label }}</div>
    <Amap
      class="disabledMap"
      v-if="value7.type == 'map' && !operateShow"
      :defaultPosition="value7.value"
      :height="250"
      @position="getPoint"
    ></Amap>
    <div
      v-else-if="value7.type == 'word' && !operateShow"
      style="display: flex; align-items: center;justify-content: center;"
    >
        <el-icon size="16" color="red">
          <LocationFilled />
        </el-icon>
        {{ value7.label }}
    </div>

    <div v-else @click="showDialog" class="model-operate-nodata">
      <Plus class="model-operate-nodata-icon"></Plus>地图定位
    </div>
    <div>
      <el-button @click="showDialog" v-if="value7.type && !operateShow" type="primary">编辑</el-button>
    </div>
    <el-dialog
      v-model="operateShow"
      :title="operateTitle"
      style="height: 45rem; overflow: hidden"
      :beforeClose="closeOprate"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="my-header">
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
            "
          >
            <div class="model-operate-title">{{ operateTitle }}</div>
            <div class="model-operate-title-hint">
              请在搜索框输入具体地址选择，或直接在地图上选地点，也可以输入经纬度
            </div>
          </div>
        </div>
      </template>
      <div class="model-operate-header">
        <div class="model-operate-header-title">
          <div class="model-operate-header-title-icon">1</div>
          选择样式
        </div>
        <div class="model-operate-header-divider"></div>
        <div class="model-operate-header-title">
          <div class="model-operate-header-title-icon">2</div>
          设置操作项
        </div>
      </div>
      <!-- 第一步 -->
      <div
        v-if="stepIndex == 0"
        class="model-operate-layout"
        style="display: flex; align-items: center"
      >
        <Amap :reShow="value7.value" :height="400" @position="getPoint"></Amap>
      </div>
      <!-- 第二步 -->
      <div v-if="stepIndex == 1" class="model-operate-table">
        <el-radio-group
          v-model="value7.type"
          style="
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            color: red;
          "
        >
          <el-radio style="margin-top: 100px" value="map" size="large">
            <div style="display: flex; align-items: center">
              <div
                style="
                  width: 5rem;
                  text-align: start;
                  color: 'var(--font-main-color)';
                "
              >
                地图卡片
              </div>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                "
              >
                <div style="display: flex; align-items: center">
                  {{ value7.label }}
                  <el-icon
                    @click="changeLabel"
                    style="margin-left: 1rem"
                    size="16"
                    color="var(--primary-main-color)"
                  >
                    <Edit />
                  </el-icon>
                </div>
                <Amap
                  :defaultPosition="value7.value"
                  :height="200"
                  class="disabledMap"
                  style="width: 400px"
                  @position="getPoint"
                ></Amap>
              </div>
            </div>
          </el-radio>
          <el-radio style="margin-top: 100px" value="word" size="large">
            <div
              style="
                display: flex;
                align-items: center;
                color: 'var(--font-main-color)';
              "
            >
              <div style="width: 5rem; text-align: start">文字</div>
              <div>
                <div style="display: flex; align-items: center">
                  <el-icon size="16" color="red">
                    <LocationFilled />
                  </el-icon>
                  {{ value7.label }}
                  <el-icon
                    @click="changeLabel"
                    style="margin-left: 1rem"
                    size="16"
                    color="var(--primary-main-color)"
                  >
                    <Edit />
                  </el-icon>
                </div>
              </div>
            </div>
          </el-radio>
        </el-radio-group>
      </div>
      <el-button @click="cancelOperate">取消</el-button>
      <el-button
        @click="stepIndex === 1 ? submitOperate() : changeStep()"
        type="primary"
        >{{ btnHint }}</el-button
      >
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import "@/utils/style/modelStyle.scss";
import Amap from "../../../components/Amap/Amap.vue";
import { LocationFilled } from "@element-plus/icons-vue";
const value7 = defineModel("value7");
const operateShow = ref(false);
const operateTitle = ref("插入地图定位");
const stepIndex = ref(0);
const btnHint = ref("下一步");
const getPoint = (e) => {
  console.log(9898, e);
  value7.value = e;
};
const changeLabel = () => {
  ElMessageBox.prompt("请输入定位名称", {
    // title: "请输入标题",
    // confirmButtonText: "确定",
    // cancelButtonText: "取消",
    // inputValue: value7.value.label,
    // inputPlaceholder: "请输入标题",
    inputClearable: true,
    inputPattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{1,30}$/,
    inputErrorMessage: "名称不能为空且不能超过30个字符",
  })
    .then(({ value }) => {
      value7.value.label = value;
      ElMessage({
        type: "success",
        message: `修改成功`,
      });
    })
    .catch(() => {});
};
const showDialog = () => {
  operateShow.value = true;
  stepIndex.value = 0;
  btnHint.value = "下一步";
};

const cancelOperate = () => {
  if (stepIndex.value == 1) {
    ElMessageBox.confirm("为保存的定位将会被清除", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        stepIndex.value = 0;
        value7.value = {};
      })
      .catch(() => {});
  } else {
    operateShow.value = false;
  }
};
const closeOprate = () => {
  operateShow.value = false;
};
const changeStep = () => {
  console.log(989877, value7.value);

  if (value7.value.value == undefined || value7.value.value.length == 0) {
    ElMessage.warning("请选择地图位置");
    return;
  }
  //value7.value 添加type:'map'
  value7.value.type = "map";
  stepIndex.value = 1;

  btnHint.value = "确定";
};

const submitOperate = () => {
  console.log(989811, value7.value);
  operateShow.value = false;
};
</script>
<style lang="scss">
.disabledMap {
  position: relative;
}
.disabledMap::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>
